<template>
  <div class="container">
    <div style="display: flex;flex-direction: row;justify-content: right;margin-top: 20px">
      <el-image :src="setting" alt="" style="width: 25px;height: 25px;margin-right: 10px"/>
      <el-image :src="chat" alt="" style="width: 25px;height: 25px;margin-right: 10px"/>
    </div>
    <el-row style="margin-top: 30px;">
      <el-col :span="2" :offset="1">
        <el-avatar :src="avatar" :size="60"></el-avatar>
      </el-col>
      <el-col :span="15" :offset="1">
        <el-row justify="left" class="nickName">追剧小楠楠</el-row>
        <el-row class="notice">闲暇时间，追剧简直就是我的最爱</el-row>
      </el-col>
      <el-col :span="1" :offset="3" style="margin-top: 14px">
        <el-image :src="right" style="width: 15px;height: 25px"></el-image>
      </el-col>
    </el-row>
    <el-divider></el-divider>
    <el-row style="color: white;line-height: 22px">
      <el-col :span="5">
        <div>12</div>
        <div>关注</div>
      </el-col>
      <el-col :span="2" style="margin-top: 10px">
        <el-divider direction="vertical"></el-divider>
      </el-col>
      <el-col :span="4">
        <div>6</div>
        <div>收藏</div>
      </el-col>
      <el-col :span="2" style="margin-top: 10px">
        <el-divider direction="vertical"></el-divider>
      </el-col>
      <el-col :span="4">
        <div>3</div>
        <div>卡劵</div>
      </el-col>
      <el-col :span="2" style="margin-top: 10px">
        <el-divider direction="vertical"></el-divider>
      </el-col>
      <el-col :span="5">
        <div>2</div>
        <div>预约</div>
      </el-col>
    </el-row>
    <el-image :src="vip" style="margin-top: 20px"></el-image>
    <div class="history">
      <el-row class="history_title">
        <el-col :span="2" :offset="1">
          <el-image :src="history" style="width: 26px"></el-image>
        </el-col>
        <el-col :span="6" style="
  font-size: 20px;
  font-family: 'SourceHanSansCN';
        color: rgb(32, 32, 32);
        font-weight: bold;
        ">历史记录
        </el-col>
        <el-col :span="3" :offset="9" style="
          font-size: 17px;
          font-family: 'SourceHanSansCN';
          color: rgb(77, 77, 77);
        ">全部
        </el-col>
        <el-col :span="2">
          <el-image :src="right2" style="margin-top: 4px"></el-image>
        </el-col>
      </el-row>
      <history-blocks :histories="histories"></history-blocks>
    </div>
    <div class="download">
      <el-row class="download_title">
        <el-col :span="2" :offset="1">
          <el-image :src="cache" style="width: 20px;height: 25px"></el-image>
        </el-col>
        <el-col :span="6" style="font-size: 20px;
  font-family: 'SourceHanSansCN';
        color: rgb(32, 32, 32);
        font-weight: bold;
        ">我的缓存
        </el-col>
        <el-col :span="3" :offset="9" style="
          font-size: 17px;
          font-family: 'SourceHanSansCN';
          color: rgb(77, 77, 77);
        ">全部
        </el-col>
        <el-col :span="2">
          <el-image :src="right2" style="margin-top: 4px"></el-image>
        </el-col>
      </el-row>
      <history-blocks :histories="histories"></history-blocks>
    </div>
  </div>
</template>

<script>
import BlockV2 from "@/components/content/block/BlockV2.vue";
import HistoryBlocks from "@/components/views/profile/HistoryBlocks.vue";

export default {
  name: "profile",
  components: {HistoryBlocks, BlockV2},
  data() {
    return {
      setting: require('@/assets/icon/profile/setting.png'),
      chat: require('@/assets/icon/profile/chat.png'),
      avatar: require('@/assets/temp/avatar.png'),
      right: require('@/assets/icon/profile/right.png'),
      vip: require('@/assets/icon/profile/vipAD.png'),
      history: require('@/assets/icon/profile/history.png'),
      right2: require('@/assets/icon/profile/right2.png'),
      cache:require('@/assets/icon/profile/cache.png'),
      histories: [
        {
          img: require('@/assets/temp/5.png'),
          title: '甜蜜时光',
          episode:1,
          per:'10%'
        },
        {
          img: require('@/assets/temp/6.png'),
          title: '我们的高中时代',
          episode:12,
          per:'13%'
        },
        {
          img: require('@/assets/temp/5.png'),
          title: '甜蜜时光',
          episode:5,
          per:'98%'
        },
        {
          img: require('@/assets/temp/6.png'),
          title: '我们的高中时代',
          episode:7,
          per:'12%'
        }

      ]
    }
  }
}
</script>

<style scoped>
.container {
  background-image: -moz-linear-gradient(90deg, rgba(255, 139, 105, 0) 0%, rgba(255, 82, 89, 0.76863) 44%, rgba(255, 11, 69, 0.81961) 100%);
  background-image: -webkit-linear-gradient(90deg, rgba(255, 139, 105, 0) 0%, rgba(255, 82, 89, 0.76863) 44%, rgba(255, 11, 69, 0.81961) 100%);
  background-image: -ms-linear-gradient(90deg, rgba(255, 139, 105, 0) 0%, rgba(255, 82, 89, 0.76863) 44%, rgba(255, 11, 69, 0.81961) 100%);
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 300px;
  z-index: 2;

}

.notice {
  font-family: "SourceHanSansCN";
  margin-top: 5px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.702);
}

.nickName {
  font-family: "SourceHanSansCN";
  color: white;
  margin-top: 5px;
  font-size: 17px
}

.history {
  margin-top: 20px;
}
.download{
  margin-top: 20px;
}
.history_title {
  align-items: center;
  display: flex;
  flex-direction: row;
}
</style>
